import React, {Component, Fragment} from 'react';
import * as routerRedux from "react-router-redux";
import {connect} from 'dva';
import {Form, Card, Select, List, Tag, Icon, Avatar, Row, Popconfirm, Input, Button, Divider, Table} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import moment from 'moment/moment';
import styles from './List.less';


@connect(({opration, loading}) => ({
  opration,
  loading: loading.models.list,
}))

class AdvertList extends Component {
  advertColumns = [
    {
      title: '序号Id',
      dataIndex: 'id',
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '缩略图',
      dataIndex: "pic"
    },
    {
      title: '链接',
      dataIndex: "url"
    },
    {
      title: '点击次数',
      dataIndex: "count"
    },
    {
      title: '上线时间',
      dataIndex: 'createTime',
      sorter: (a, b) => Date.parse(a.createTime) > Date.parse(b.createTime),
      render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '操作',
      key: 'operation',
      render: (text, item) => (
        <Fragment>
          <a onClick={() => this.advertEdit(item.id)}>编辑</a>
          <Divider type="vertical"/>
          <Popconfirm onConfirm={() => this.advertDelete(item.id)} title="确定删除该类别吗？"
                      icon={<Icon type="question-circle-o" style={{color: 'red'}}/>}>
            <a><Icon type="delete" style={{marginRight: 8}}/>删除</a>
          </Popconfirm>
          <Divider type="vertical"/>
          <a onClick={() => this.advertDetail(item.id)}>详情</a>
        </Fragment>
      ),
    },
  ];

  componentDidMount() {
    this.fetchMore();
  }

  fetchMore = () => {
    const {dispatch} = this.props;
    dispatch({
      type: 'opration/fetch',
      payload: {
        type: "user"
      },
    });
  };
  /*新增*/
  advertAdd = () => {
    this.props.dispatch(routerRedux.push({
      pathname: `/author/imgAdd`,
    }))
  }
  /*详情*/
  advertDetail = (id) => {
    this.props.dispatch(routerRedux.push({
      pathname: `/author/detail/${id}`,
    }))
  }
  /*删除*/
  advertDelete = (id) => {
    this.props.dispatch({
      type: 'opration/delete',
      payload: {id: id, type: "user"},
    })
  }
  /*编辑*/
  advertEdit = (id) => {
    this.props.dispatch(routerRedux.push({
      pathname: `/author/imgedit/${id}`,
    }))
  }
  render() {
    const {form, opration: {list}, loading,} = this.props;
    return (
      <PageHeaderWrapper
        title="用户图片列表"
      >
        <Card
          style={{marginTop: 24}}
          bordered={false}
          bodyStyle={{padding: '8px 32px 32px 32px'}}
        >
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              <Button icon="plus" type="primary" onClick={() => this.advertAdd()}>
                新建
              </Button>
            </div>
          </div>
          <Table
            loading={loading}
            rowKey={record => record.id}
            dataSource={list}
            columns={this.advertColumns}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default AdvertList
